import React from 'react'
import { TabBar } from 'antd-mobile'
import Home from '../../pages/home'
import GoodsList from '../../pages/goodsList'
import ShopCar from '../../pages/shopCar'
import My from '../../pages/my'
import Order from '../../pages/order'
import Address from '../../pages/address'
import EditAddress from '../../pages/editAddress'
import Ai from '../../pages/ai'
import { Route, Routes, useNavigate, useLocation, BrowserRouter as Router } from 'react-router-dom'
import { AppOutline, MessageOutline, UnorderedListOutline, UserOutline, } from 'antd-mobile-icons'
import KeepAlive from 'react-activation'
const Bottom = () => {
    const navigate = useNavigate()
    const location = useLocation()
    const { pathname } = location

    const setRouteActive = (value) => {
        navigate(value)
    }

    const tabs = [
        {
            key: '/',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/shopCar',
            title: '购物车',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/me',
            title: '我的',
            icon: <UserOutline />,
        },
    ]

    return (
        <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
            {tabs.map(item => (<TabBar.Item key={item.key} icon={item.icon} title={item.title} />))}
        </TabBar>
    )
}

export default () => {
    return (
        <Router>
            <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
                <div style={{ flex: 1, overflowY: 'auto', height: 'cach(100vh - 50px)', backgroundColor: '#f5f5f5' }}>
                    <Routes>
                        <Route path='/' element={<Home />} />
                        <Route path='/shopCar' element={<ShopCar />} />
                        <Route path='/me' element={<My />} />
                        <Route path='/goodsList' element={<GoodsList />} />
                        <Route path='/order' element={<Order />} />
                        <Route path='/address' element={<Address />} />
                        <Route path='/editAddress' element={<EditAddress />} />
                        <Route path='/ai' element={<Ai />} />
                    </Routes>
                </div>
                <div style={{ width: '100%', borderTop: '1px solid #eee', backgroundColor: '#fff', height: '50px' }}>
                    <Bottom />
                </div>
            </div>
        </Router>
    )
}

